<template>
	<view class="product-card">
		<!-- <view class="img">
			<image :src="$ossUrl+'/static/bg/goods-top-bg.png'" mode="widthFix" style="width: 750rpx;"></image>
		</view> -->
		<view class="img-light flex flex-js-center">
			<image :src="$ossUrl+'/static/bg/goods-top--light.png'" mode="widthFix" style="width: 418rpx;"></image>
		</view>
		<view class="media-card donghua">
			<w-media :product='product' :width="220" @click.native='preview'></w-media>
		</view>
		<view class="goods-info">
			<view class="plr-13">
				<view class="baseImageBg"></view>
			</view>
			<!-- <view class="plr-13" style="position: relative;z-index: 0;">
				<image :src="$ossUrl+'/static/bg/BaseImg.png'" mode="widthFix" style="width: 100%;"></image>
			</view> -->
			<view class="info">
				<view class="font-size-20 font-color-white font-w-500 text-center">{{ product.name && handleLang(product.name) }}</view>
				<view style="background-color:#1F1F1F;margin-top: -12rpx;" class="w-100 plr-16">
					<view class="flex flex-ai-center flex-js-center pt-20" style="position: relative;">
						<w-tag size="mini" :name="handleLang('限量')" class='mr-8' :value="product.total_num+'份'"></w-tag>
						<w-tag size="mini" :name="handleLang('流通')" v-if="product.goods_type!=1 && product.flux" :value="product.flux+'份'"></w-tag>
					</view>
					<view class="br-12" v-if="list.length" style="background-color: #151515;margin-top: 48rpx;padding: 40rpx 46rpx;">
							<!-- <view class="mb-12 flex flex-js-sb"  v-for="item in list" :key="item.key">
								<text class="font-color-minor">{{item.label}}</text>
								<text class="flex-1 text-right">{{item.value}}</text>
								<w-icon class='ml-4' name="copy-dark" v-if="item.key=='user_hash'" @click='copy'></w-icon>
							</view> -->
							<view class="font-size-14 flex flex-ai-center" v-for="item in list" :key="item.key">
								<text style="color: #AEAEAE;">{{ item.label}}</text>
								<text class=" text-right font-color-white ml-16">{{item.value}}</text>
								<w-icon class='ml-4' name="copy-dark" v-if="item.key=='user_hash'" @click='copy'></w-icon>
								<!-- v-if="item.key=='user_hash'" -->
							</view>
						</view>
				</view>
				<!-- <view class="pa-12 flex flex-ai-center flex-js-sb top">
									<view class="font-color-white flex flex-ai-center">
										<text class="font-size-16" v-if="!product.crystal">￥</text>
										<w-icon class="mr-8" size="19" v-else :name="priceMap[product.crystal.crystal_type]"></w-icon>
										<text
											class="font-size-24">{{product.crystal?product.crystal.crystal_price:product.price }}</text>
									</view>
									<slot name="right"></slot>
								</view> -->
				<!-- <view class="bottom plr-12 flex flex-dir-col flex-js-sb pt-8 pb-16">
					<view class="flex flex-ai-center">
						<text
							class="font-size-16 font-color-textPrimary font-w-500">{{ product.name && handleLang(product.name) }}</text>
					</view>
					<view class="flex mt-12">
						<w-tag :name="handleLang('限量')" class='mr-8' :value="product.total_num+'份'"></w-tag>
						<w-tag :name="handleLang('流通')" v-if="product.goods_type!=1 && product.flux" :value="product.flux+'份'"></w-tag>
						<w-tag v-else name="未开启" :value='product.not_open_num+`份`'></w-tag>
						<w-tag v-else :name="handleLang('剩余')" :value='inventory+`份`'></w-tag>
					</view>
				</view> -->
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import productMixin from '@/mixins/product.js'
	export default {
		name: "w-product-details-card",
		mixins: [productMixin],
		props: {
			product: {
				type: Object,
				defaul() {
					return {
						batch: {},
						issuer: {},
						series: {}
					}
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				priceMap: {
					yellow: 'hsj',
					purple: 'zsj',
					blue: 'lsj'
				},
				bottom: 0
			};
		},
		computed: {
			list() {
				let map = {
					series_name: "所属专辑",
					user_hash: "合约地址",
					// rz_code: '认证标识',
					// nickname:"拥有者"
				}
				return Object.keys(this.info).map(k => {
					return {
						label: map[k]&&this.handleLang(map[k]),
						key: k,
						value: k!=='rz_code'? this.info[k]&&this.handleLang(this.info[k]):this.info[k]
					}
				}).filter(v => v.label && v.value)
			}
		},
		methods: {
			preview() {
				uni.previewImage({
					urls: [this.$ossUrl + this.product['3d_url']],
					current: this.$ossUrl + this.product['3d_url']
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.product-card {
		width: 100%;
		padding-top: 180rpx;
		position: relative;
		background-image: url($IMG_URL + '/static/bg/goods-top-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.img-light {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.media-card {
			width: 750rpx;
			@extend .flex, .flex-js-center;
		}

		.goods-info {
			width: 750rpx;
			margin-top: 44rpx;
			position: relative;
			
			// background: linear-gradient(135deg,#2E2C29,#43413C);
			// padding-top: 44rpx;
			// .baseImg {
			// 	width: 100%;
			// 	height: 193rpx;
			// 	background-image: url($IMG_URL + '/static/bg/BaseImg.png');
			// 	background-size: 100% auto;
			// }
			.baseImageBg {
				width: 100%;
				height: 193rpx;
				background-image: url($IMG_URL + '/static/bg/BaseImg.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.info {
				background-image: url($IMG_URL + '/static/bg/goods-title-line.png');
				background-size: 100% auto;
				background-repeat: no-repeat;
				width: 100%;
				// z-index: 999999999999999999999;
				margin-top: -45rpx;
				position: relative;
				
				>.top {
					height: 88rpx;
				}

				>.bottom {
					@extend .flex-1, .br-12;
					background: #fff;
				}
			}
		}
	}
	@keyframes swing {
	  0%   { transform: rotateY(-45deg); }
	  50%  { transform: rotateY(45deg); }
	  100% { transform: rotateY(-45deg); }
	}
	.donghua {
	  position: relative;
	  transform-style: preserve-3d;
	  animation: swing 6s ease-in-out infinite;
	}
</style>